<div
    class="gh-blognav-item {{unless @benefitItem.isNew "gh-blognav-item--sortable"}}"
    {{validation-status errorClass="gh-blognav-item--error" errors=@benefitItem.errors}}
    ...attributes
>
    {{#unless @benefitItem.isNew}}
        <span class="gh-blognav-grab">
            {{svg-jar "grab"}}
            <span class="sr-only">Reorder</span>
        </span>
    {{/unless}}

    <div class="gh-blognav-line {{unless @benefitItem.name "placeholder"}}">
        {{svg-jar "check-2"}}
        <span
            class="gh-blognav-label"
            {{validation-status errors=@benefitItem.errors property="name" hasValidated=@benefitItem.hasValidated}}
        >
            <GhTrimFocusInput
                @shouldFocus={{@benefitItem.last}}
                @placeholder={{if this.isFreeTier "Access to all public posts" "Expert analysis"}}
                @value={{readonly @benefitItem.name}}
                @input={{this.handleLabelInput}}
                @keyPress={{this.clearLabelErrors}}
                @stopEnterKeyDownPropagation={{true}}
                @focus-out={{fn this.updateLabel @benefitItem.name}}
                data-test-input="benefit-label" />

            <GhErrorMessage
                @errors={{@benefitItem.errors}}
                @property="name"
                data-test-error="benefit-label" />
        </span>
    </div>

    {{#if @benefitItem.isNew}}
        <button type="button" class="gh-blognav-add" {{on "click" (fn @addItem @benefitItem)}} data-test-button="add-benefit">
            {{svg-jar "plus"}}<span class="sr-only">Add</span>
        </button>
    {{else}}
        <button type="button" class="gh-blognav-delete" {{on "click" (fn @deleteItem @benefitItem)}} data-test-button="delete-benefit">
            {{svg-jar "trash"}}<span class="sr-only">Delete</span>
        </button>
    {{/if}}

</div>